.sx__event-modal {
  visibility: hidden;
  position: fixed;
  top: var(--sx-event-modal-top);
  left: var(--sx-event-modal-left);
  width: 400px;
  max-width: 100%;
  height: fit-content;
  background-color: var(--sx-color-background);
  z-index: 2;

  &.is-open {
    animation: slide-sideways;
    animation-duration: 0.3s;
    visibility: initial;
  }

  .is-dark & {
    background-color: var(--sx-color-surface-container-high);
  }
}

.sx__event-modal-default {
  padding: var(--sx-spacing-padding6);
  background-color: var(--sx-color-background);
  box-shadow:
    0 24px 38px 3px rgb(0 0 0 / 14%),
    0 9px 46px 8px rgb(0 0 0 / 12%),
    0 11px 15px -7px rgb(0 0 0 / 20%);
  border-radius: var(--sx-rounding-small);
  max-height: 250px;
  overflow-y: scroll;
}

@keyframes slide-sideways {
  from {
    opacity: 0;
    transform: translateX(var(--sx-event-modal-animation-start));
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}
